<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card bordered flat class="q-dialog-plugin">
      <q-bar class="bg-primary text-white q-pa-lg">
        <div class="text-h6">新增模板组</div>
      </q-bar>
      <q-form
          @submit="onSubmit"
          class="q-gutter-md q-pa-md"
      >
        <q-input
            filled dense clearable
            v-model="form.Name"
            label="模板名称"
            lazy-rules
            :rules="[ val => val && val.length > 0 || '请输入名称']"
        />

        <q-input
            dense clearable
            filled
            v-model="form.Description"
            label="模板描述"
            type="textarea"
        />
      </q-form>
      <!-- 按钮示例 -->
      <q-separator/>
      <q-card-actions align="right">
        <q-btn color="primary" size="md" label="提交" @click="onSubmit"/>
        <q-btn color="primary" size="md" label="取消" @click="onDialogCancel"/>
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import {useDialogPluginComponent, useQuasar} from 'quasar'
// import {addTemplateGroup, editTemplateGroup} from "@/api/api"
import * as templateApi from "/wailsjs/go/api/TemplateApi"

const props = defineProps({
  template: {
    type: Object,
    default: () => ({})
  }
})
const form = ref({
  Key: '',
  Name: '',
  Path: '',
  Description: ""
});
defineEmits([
  ...useDialogPluginComponent.emits
])
const $q = useQuasar()
const {dialogRef, onDialogHide, onDialogOK, onDialogCancel} = useDialogPluginComponent()
onMounted(() => {
  form.value = props.template;
})

function onSubmit() {
  if (props.template.Key) {
    templateApi.EditTemplate(form.value).then(res => {
      if (res.success) {
        $q.notify({
          message: '操作成功',
        })
        onDialogOK(res)
      } else {
        $q.notify({
          type: 'negative',
          message: res.msg
        })
      }
    })
  } else {
    templateApi.AddTemplate(form.value).then(res => {
      if (res.success) {
        $q.notify({
          message: '操作成功',
        })
        onDialogOK(res)
      } else {
        $q.notify({
          type: 'negative',
          message: res.msg
        })
      }

    })
  }

}
</script>
